<template>
  <!-- 修改商品 -->
  <div class="lfy_add_box">
    <div style="height: 20px"></div>
    <i class="el-icon-arrow-left" @click="backEdit"></i>
    <div class="add_container">
      <!--  -->
      <el-form ref="form" :model="form" label-width="80px" label-position="left">
        <!--  -->
        <el-form-item label="排序">
          <el-input class="sort_input_width" v-model="goodsItem.sort"></el-input>
        </el-form-item>

        <!--  -->
        <el-form-item label="分类">
          <el-select class="input_width" v-model="form.fenlei" placeholder="中药">
            <el-option label="中药" value="shanghai"></el-option>
            <el-option label="西药" value="beijing"></el-option>
            <el-option label="分组1" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <!--  -->
        <div class="input_box">
          <el-form-item label="拼团价格">
            <el-input class="input_width border_radius price_input_width" v-model="goodsItem.currentPrice"></el-input>
            <span class="yuan">元</span>
          </el-form-item>
          <el-form-item label="原价">
            <el-input class="input_width border_radius price_input_width" v-model="goodsItem.oldPrice"></el-input>
            <span class="yuan">元</span>
          </el-form-item>
        </div>
        <!--  -->
        <el-form-item label="库存">
          <el-input class="input_width" v-model="goodsItem.kucun"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item class="mar_bottom" label="详情">
          <el-input class="details_input_width" type="textarea" v-model="form.details"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item>
          <el-button class="submit_btn" type="primary" @click="onSubmit"> 确定 </el-button>
          <span class="back_goods" @click="backEdit">返回商品列表</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { lfyEditGoodsItem, lfyEditCreateItem } from '../../api/index'
export default {
  // 表单
  data() {
    return {
      form: {
        sort: '',
        // huichang: '',
        fenlei: '',
        price: '',
        kucun: '',
        details: '',
      },
      // ids: '',
      goodsItem: {},
    }
  },
  // 修改
  created() {
    this.ids = this.$route.params.id
    lfyEditGoodsItem({ id: this.ids }).then((res) => {
      console.log(res)
      this.goodsItem = res.data
      console.log(this.goodsItem)
    })
  },
  methods: {
    // 修改
    onSubmit() {
      lfyEditCreateItem(this.goodsItem).then((res) => {
        if (res.code == 200) {
          this.backEdit()
        }
      })
    },
    // 路由
    // 返回商品
    backEdit() {
      this.$router.push('/backGoods')
    },
  },
}
</script>
<style lang="scss">
* {
  box-sizing: border-box;
}

.lfy_add_box {
  padding: 0 30px;
}

.el-icon-arrow-left {
  font-size: 20px;
}

.add_container {
  padding-left: 30px;
}
.input_width {
  width: 20%;
}
.yuan {
  display: inline-block;
  // width: 40px;
  height: 40px;
  border: 1px solid #dcdfe6;
  text-align: center;
  padding: 0 10px;
}
.el-input__inner {
  border-radius: 0;
}
.sort_input_width {
  width: 70%;
}
.details_input_width {
  width: 75%;
}
.el-textarea__inner {
  height: 150px;
}

.el-form-item {
  margin-bottom: 40px;
}
.mar_bottom {
  margin-bottom: 60px;
}

.back_goods {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgb(187, 187, 187);
  border-radius: 4px;
  color: #101010;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  padding: 0 10px;
  margin-left: 30px;
}
.input_box {
  display: flex;
  height: 40px;
  margin-bottom: 40px;
}
.price_input_width {
  width: 80%;
}
</style>
